<template>
  <div class="box">
    <div class="user">
      <div class="fanhui">
        <p @click="fanhui">返回</p>
      </div>
      <div class="init" @click="init">
        更新文章
      </div>
      <div class="send iconfont" @click="sendhandels">
        发布
        <span class="bottom" ref="bottom">&#xe611;</span>
        <span class="top" ref="top">&#xe617;</span>
      </div>
      <div class="user_img">
        <img :src="$store.state.nowUserIntro.avatar || my_img">
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { initArtishuju } from 'com/shuju'
export default {
  name: 'WriteHeader',
  data () {
    return {
      tf: false,
      my_img: require('../../../assets/images/touxiang.gif')
    }
  },
  computed: {
    ...mapState({
      aTitle: 'articalTitle',
      aSummary: 'articalSummary',
      aContent: 'articalContent',
      aTags: 'articalTag',
      aClass: 'articalClass'
    })
  },
  methods: {
    ...mapMutations(['changeWriteDisplay']),
    init () {
      if (this.$route.params.id) {
        var sure = confirm('是否更新' + this.aTitle + '文章？')
        if (sure) {
          if (this.$route.params.id) {
            var data = new FormData()
            var obj = {
              tags: this.aTags,
              title: this.aTitle,
              summary: this.aSummary,
              content: this.aContent,
              id: this.$route.params.id
            }
            console.log(obj)
            data.set('name', this.aClass)
            data.set('tags', this.aTags)
            data.set('title', this.aTitle)
            data.set('summary', this.aSummary)
            data.set('content', this.aContent)
            data.set('id', this.$route.params.id)
            initArtishuju(data, this)
          } else {
            alert('哦豁！')
          }
        }
      } else {
        alert('请去个人中心更新文章')
      }
    },
    fanhui () {
      this.$store.commit('getArticalTag', '')
      this.$store.commit('getArticalClass', '')
      this.changeWriteDisplay(false)
      this.tf = false
      this.$router.go(-1)
    },
    sendhandels () {
      this.$refs.bottom.style.display = this.tf === true ? 'block' : 'none'
      this.$refs.top.style.display = this.tf === false ? 'block' : 'none'
      this.tf = !this.tf
      this.changeWriteDisplay(this.tf)
    }
  },
  activated () {
    document.documentElement.style.overflow = 'none'
  }
}
</script>

<style lang="stylus" scoped>
    .user{
      width: 1000px
      height: 70px
      margin:0 auto
      .fanhui{
        user-select: none
        position: absolute
        margin-top: 30px
        font-size: .35rem
        color: rgb(15,113,213)
        cursor: pointer
        p{
          margin: 0
        }
      }
      .init{
        cursor: pointer
        user-select: none
        position: absolute
        left: 340px
        z-index: 10
        margin-left: 890px
        margin-top: 35px
        font-size: .35rem
        color: rgb(15,113,213)
      }
      .send{
        user-select: none
        position: relative
        float: left
        z-index: 10
        margin-left: 890px
        margin-top: 35px
        font-size: .35rem
        color: rgb(15,113,213)
        span{
          display: inline-block
          position: absolute
          top: 0
          right: -20px
        }
        .top{
          display: none
        }
      }
      .send:hover{
        cursor: pointer
        color: rgb(80,100,213)
      }
      .user_img{
        user-select: none
        width: 45px
        height: 45px
        border-radius: 50%
        float: right
        margin-top: 17px
        img{
          width: 100%
          height: 100%
          border-radius: 50%
        }
      }
    }
</style>
